<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
	<div id="app" class="vueBox">
		<div @click="showMenus(1)" v-text="cityAfter?cityAfter:'请选择收货地址'" style="font-size: 20px;line-height: 24px">
		</div>
		<div class="menus-mask" v-show="showData" @click="showMenus(0)" @touchmove.prevent></div>
		<div :class="['menus-box',showData?'menus-show':'']">
			<div class="menus-head">
				<div class="menus-head-title borderbottom">收货地址</div>
				<ul class="menus-tabs borderbottom">
					<li :class="{'active':inx==index}" v-for="item,index in menu_tabs" @click="menusTabs(index)">
						<span v-text="item.name"></span>
						<i class="mintui mintui-back mintui-arrowright"></i>
					</li>
					<li v-if="!notab" :class="{'active':inx==menu_tabs.length}" @click="menusTabs(menu_tabs.length)">
						<span>请选择</span>
					</li>
				</ul>
			</div>
			<ul class="menus-ul" :style="{'left':-cur_index*50+'%'}">
				<li :class="['menus-li',{'cur':cur_index==i}]" v-for="menu,i in array">
					<div class="menus-item borderbottom" v-for="item,j in menu" @click="adressC(item,i,j)">
						<a :class="[address[i]==j?'active':'']">
							<p class="name">
								<span class="info-con-lable" v-if="item.is_vip">已购</span><span
									v-text="item.name"></span>
							</p>
							<i v-if="address[i]!==j&&item.cities||address[i]!==j&&item.areas"
								class="mintui mintui-back mintui-arrowright"></i>
							<i v-if="address[i]==j" class="mintui mintui-success"></i>
						</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</body>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<!-- 数据源 -->
<script src="js/citys.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			cityAfter: '', //选择后的城市
			showData: 0, //弹窗控制器
			inx: 0, //当前菜单索引
			menu_tabs: [], //菜单
			menus: [], //数据源
			array: [], //选择器展示的数据
			address: [], //默认地址
			notab: 0 //没有下一级 隐藏tab'请选择'
		},
		computed: {
			//用于判断tabs位置以及窗口宽度
			cur_index() {
				return this.inx < 1 ? this.inx : this.inx - 1
			}
		},
		created() {
			var getdata = JSON.parse(localStorage.getItem('storlist'));
			if (getdata) {
				this.notab = 1;
				this.inx = getdata.inx;
				this.menu_tabs = getdata.menu_tabs;
				this.array = getdata.array;
				this.address = getdata.address;
				this.menus_left = getdata.menus_left;
				$('.menus-tabs').animate({
					scrollLeft: getdata.menus_left
				});
			} else {
				this.getCity();
			}
		},
		methods: {
			//显示选择器
			showMenus: function (bool) {
				this.showData = bool
			},
			//切换菜单
			menusTabs(index) {
				this.inx = index;
				var i = index ? index - 1 : index;
				this.menus_left = document.querySelectorAll(".menus-tabs > li")[i].offsetLeft;
				$('.menus-tabs').animate({ // 使用jQuery的动画兼容性比较好
					scrollLeft: this.menus_left
				});
			},
			//选择城市
			adressC(item, i, j) {
				this.notab = 0;
				// 设置 tabs
				this.$set(this.menu_tabs, i, item);
				// 清除 tabs
				this.menu_tabs.splice(i + 1, this.menu_tabs.length);
				// 清除数据
				this.array.splice(i + 1, this.array.length);
				// 清除索引
				this.address.splice(i + 1, this.address.length);
				// 设置数据索引
				this.$set(this.address, i, j);
				if (item.cities && item.cities.length) {
					//高亮显示
					this.inx = i + 1;
					//设置下一级城市数据
					this.$set(this.array, i + 1, item.cities)
				} else if (item.areas && item.areas.length) {
					//高亮显示
					this.inx = i + 1;
					//设置下一级区县数据
					this.$set(this.array, i + 1, item.areas)
				} else {
					//清空当前选中城市
					this.cityAfter = ''; 
					//没有子类 最后一项
					this.notab = 1; 
					for (var i in this.menu_tabs) {
						this.cityAfter += this.menu_tabs[i].name //选中当前城市
					}
					this.showMenus(0); //关闭弹窗
					var storlist = {
						inx: this.inx,
						menu_tabs: this.menu_tabs,
						array: this.array,
						address: this.address,
						menus_left: this.menus_left,
					};
				}
			},
			//获取数据
			getCity() {
				this.menus = citysData.provinces;
				// 设置 二级
				this.$set(this.array, 0, this.menus)
				this.$set(this.array, 1, this.menus[0].cities)
				// 设置 tabs
				this.$set(this.menu_tabs, 0, this.menus[0]);
				// 设置默认值
				this.$set(this.address, 0, 0); //一级选中状态
				this.$set(this.address, 1, 0); //二级选中状态 
				console.log(this.array)
				console.log(this.address)
			}
		}
	});
</script>

</html>